{% extends "base.html" %}

{% block title %}处理记录 - 自动化脱敏系统{% endblock %}

{% block content %}
<div class="main-content">
    <div class="upload-card" style="width: 800px; padding-left: 40px; border-left-width: 10px;">
        <h2 class="upload-title">
            <i class="fas fa-history"></i>
            脱敏处理记录
        </h2>

        <!-- 过滤区 -->
        <div class="form-section">
            <h3><i class="fas fa-filter"></i> 过滤条件</h3>
            <input type="text" placeholder="搜索文件名..." class="input-field" id="searchInput">
            <select class="input-field" id="methodFilter">
                <option value="all">全部方式</option>
                <option value="encrypt">加密脱敏</option>
                <option value="hash">哈希脱敏</option>
                <option value="mask">基础脱敏</option>
                <option value="image_mask">人脸图像脱敏</option>
            </select>
        </div>

        <!-- 记录表格 -->
        <div class="form-section">
            <h3><i class="fas fa-table"></i> 处理记录</h3>
            <table class="record-table">
                <thead>
                    <tr>
                        <th>文件名</th>
                        <th>处理方式</th>
                        <th>处理时间</th>
                        <th>密钥管理</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in records %}
                    <tr>
                        <td>{{ record.filename }}</td>
                        <td class="method-{{ record.method|lower }}">
                            {{ '加密脱敏' if record.method == 'encrypt' else 
                               '哈希处理' if record.method == 'hash' else 
                               '人脸图像脱敏' if record.method=='image_mask' else
                               '基础脱敏' }}
                        </td>
                        <td>
                            {% if record.process_time %}
                                {{ record.process_time.strftime('%Y-%m-%d %H:%M:%S') }}
                            {% else %}
                                N/A
                            {% endif %}
                        </td>
                        <td>
                            {% if record.encrypt_key %}
                            <button class="submit-btn" 
                                    onclick="downloadKey('{{ record.encrypt_key }}')">
                                <i class="fas fa-download"></i> 下载密钥
                            </button>
                            {% else %}
                            <span class="no-key">-</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="no-records">暂无处理记录</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    // 前端过滤功能
    document.getElementById('searchInput').addEventListener('input', filterRecords);
    document.getElementById('methodFilter').addEventListener('change', filterRecords);

    function filterRecords() {
        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
        const filterMethod = document.getElementById('methodFilter').value;

        document.querySelectorAll('tbody tr').forEach(row => {
            const filename = row.children[0].textContent.toLowerCase();
            const method = row.children[1].textContent.includes('加密') ? 'encrypt' : 
                           row.children[1].textContent.includes('哈希') ? 'hash' :
                           row.children[1].textContent.includes('人脸图像') ? 'image_mask' :
                           'mask';

            const matchSearch = filename.includes(searchTerm);
            const matchMethod = (filterMethod === 'all') || (method === filterMethod);

            row.style.display = (matchSearch && matchMethod) ? '' : 'none';
        });
    }
</script>

<script>
    function downloadKey(key) {
        // 这里使用fetch发送请求，实际需根据后端接口调整
        fetch('/download_key?key=' + key)
          .then(response => response.text())
          .then(data => {
                // 处理下载响应，例如提示下载成功
                alert('密钥下载成功：' + data);
            })
          .catch(error => {
                // 处理错误，例如提示下载失败
                alert('密钥下载失败：' + error);
            });
    }
</script>
{% endblock %}